<script setup>
</script>
<template>
<div class="map">
  <div class="map1"></div>
  <div class="map2"></div>
  <div class="map3"></div>
  <div class="chart">
    <slot />
  </div>
</div>
</template>
<style scoped lang="less">
.map {
  position: relative;
  height: 810px;
  .map1{
    position: absolute;
    width:518px;
    height:518px;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background: url('../assets/map.png');
    background-size: 100% 100%;
    opacity: 0.3;
  }
  .map2{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:643px;
    height:643px;
    background: url('../assets/lbx.png');
    background-size: 100% 100%;
    animation: rotate1 15s linear infinite;//rotate1的动画 15秒完成 匀速 无限循环
    opacity: 0.6;
  }
  .map3{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:566px;
    height:566px;
    background: url('../assets/jt.png');
    background-size: 100% 100%;
    animation: rotate 10s linear infinite;
    opacity: 0.6;
  }
  .chart {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height:810px;
    width: 100%;
  }
  @keyframes rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);//从这个状态，那个位移动画得保留
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);//到这个状态就是旋转了一圈
    }
  }
  @keyframes rotate1 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  
}
</style>